<template>
	<view style="width: 100vw;height: 100vh;background-color: rgba(0,0,0,0.3);">
		<view style="height: calc(40vh - 140rpx);"/>
		<view class="card" style="width: 70vw;margin-left: calc(15vw - 20rpx);">
			<view style="font-weight: 600;text-align: center;font-size: 32rpx;">
				发现新版本
			</view>
			<view style="margin-top: 10rpx;text-align: right;color: rgba(0,0,0,0.5);font-size: 26rpx;">
				{{data.version}}
			</view>
			<scroll-view scroll-y style="margin-top: 20rpx;height: 20vh;overflow-y: auto;background-color: rgba(0,0,0,0.1);border-radius: 20rpx;padding: 20rpx;font-size: 26rpx;width: calc(100% - 40rpx);">
				<rich-text :nodes="data.desc"></rich-text>
			</scroll-view>
			<view style="margin-top: 20rpx;">
				<view v-if="isUpdate">
					<tui-progress width="12" :percent="percent" activeColor="linear-gradient(to right,#07c160,rgb(246,107,109))" show-info color="rgb(246,107,109)"></tui-progress>
					
					<view @click="onRestart()" :style="{opacity: isOk ? 1 : 0.4}" class="text-center" style="padding: 10rpx;min-height: 50rpx;border-radius: 100rpx;background-color: #07c160;color: white;margin-top: 20rpx;">
						{{isOk ? "完成" : "更新中，请稍后"}}
					</view>
				</view>
				<view v-else @click="onUpdate" class="text-center" style="padding: 10rpx;min-height: 50rpx;border-radius: 100rpx;background-color: rgb(246,107,109);color: white;">
					立即更新
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:{},
				// 是否正在更新
				isUpdate:false,
				// 是否下载完成
				isOk:false,
				// 更新进度
				percent:0
			}
		},
		onLoad(event) {
			this.data = JSON.parse(event.data);
		},
		mounted() {
			
		},
		methods:{
			// 立即更新
			onUpdate(){
				if (!this.data.isWgt) {
					// apk整包升级
					this.data.edition_force = 0; // 解决跳转外部链接后，更新提示还在的问题
					plus.runtime.openURL(this.data.address);
					// this.cancel();
				} else {
					//wgt资源包升级
					this.download();
				}
			},
			// wgt资源包升级
			download() {
				this.isUpdate = true;
				this.isOk = false;
				const downloadTask = uni.downloadFile({
					url: this.data.address,
					success: res => {
						if (res.statusCode === 200) {
							plus.runtime.install(
								res.tempFilePath, {force: true},
								() => {
									this.isOk = true;
								},
								(e) => {
									console.error('install fail...');
								}
							);
						}
					}
				});
				downloadTask.onProgressUpdate(res => {
					this.percent = res.progress;
				});
			},
			// 完成
			onRestart() {
				if(!this.isOk) return;
				// 缓存版本
				uni.setStorageSync('wgt_version', this.data.version);
				plus.runtime.restart();
			}
		}
	}
</script>

<style>
	page {
		background: transparent;
	}
	.card{
		box-shadow: 4rpx 4rpx 8rpx rgba(0, 0, 0, .1), -4rpx -4rpx 8rpx rgba(0, 0, 0, .1);
		padding: 20rpx;
		background-color: white;
		border-radius: 20rpx;
	}
	.mask{
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.4);
	}
</style>